import React from 'react'
import { Button, buttonVariants } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Badge } from './ui/badge'
import { cn } from '@/lib/utils'
import Link from 'next/link'
import { trpc } from "@/trpc/client"
import dayjs from 'dayjs'
import { useSession } from 'next-auth/react'
export default function TaskCard({ task, onSuccess }: { task: any; onSuccess?: () => void }) {
  const { data: session } = useSession()
  const { user } = session || {};

  const { mutateAsync: deleteTask } = trpc.createTasks.delete.useMutation({
    onSuccess: () => {
      // 调用父组件传递的刷新函数
      onSuccess?.();
    }
  });

  // 处理删除确认
  const handleDelete = async () => {
    await deleteTask({ id: task.id });
  };
  return (
    <Card key={task.id}>
      <CardHeader className=" flex flex-row justify-between">
        <CardTitle>{task.name}</CardTitle>
        <Badge className={
          cn(
            task.priority === 'high' ? 'bg-red-500' : '',
            task.priority === 'medium' ? 'bg-yellow-500' : '',
            task.priority === 'low' ? 'bg-green-500' : '',
          )
        }>{task.priority}</Badge>
      </CardHeader>
      <CardContent>
        <p>{task.description}</p>
        <span className="text-slate-600">{dayjs(task.createdAt).format('YYYY-MM-DD')}</span>
      </CardContent>
      <CardFooter className="flex gap-x-2 justify-end">
        <Button disabled={!user} onClick={handleDelete}>Delete</Button>
        <Button disabled={!user} >
          <Link href={`/task/${task.id}/edit`}>Edit</Link>
        </Button>
      </CardFooter>
    </Card>
  )
}